<template>
  <div class="content">
    <div class="title">
      <h3>地图定位<span>Map location</span></h3>
    </div>
    <div id="map"></div>
  </div>
</template>

<script>
export default {
  name: 'smallMap',
  data() {
    return {
      bbb: '',
      updata: '',
      bounds: [
        [109.53035453829456, 18.310654383343522], // Southwest
        [109.53035475725476, 18.30946786268281],
      ], // Northeast
    }
  },
  props: ['transPosition'],
  mounted() {
    this.initmap()
  },
  methods: {
    initmap() {
      var loc = [109.5303482928844, 18.31000702577523]
      var map = new mapboxgl.Map({
        container: 'map',
        style: {
          version: 8,
          sources: {
            'raster-tiles': {
              // "attribution": attribution,
              type: 'raster',
              tiles: [
                // window._CONFIG['serveUrl'] +
                //     // ':8090/iserver/services/map-ShuangChuang-2/rest/maps/双创导航@导航/zxyTileImage.png?z={z}&x={x}&y={y}',
                //     ':8090/iserver/services/map-baidu/rest/maps/normal/zxyTileImage.png?z={z}&x={x}&y={y}',
                'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
              ],
              tileSize: 256,
            },
          },
          layers: [
            {
              id: 'simple-tiles',
              type: 'raster',
              source: 'raster-tiles',
              minzoom: 0,
              maxzoom: 22,
            },
          ],
        },
        center: loc,
        zoom: 16,
        pitch: 0,
        bearing: 50,
        // maxBounds: this.bounds
      })
      this.local = function () {
        map.flyTo({
          center: [this.transPosition[0], this.transPosition[1]],
        })
      }
      var nav = new mapboxgl.NavigationControl({
        //是否显示指南针，默认为true
        showCompass: false,
        //是否显示缩放按钮，默认为true
        showZoom: false,
      })
      //添加导航控件，控件的位置包括'top-left', 'top-right','bottom-left' ,'bottom-right'四种，默认为'top-right'
      map.addControl(nav, 'top-right')
      // map.addControl(new mapboxgl.FullscreenControl())
      var _this = this
      var size = 80
      var pulsingDot = {
        width: size,
        height: size,
        data: new Uint8Array(size * size * 4),

        onAdd: function () {
          var canvas = document.createElement('canvas')
          canvas.width = this.width
          canvas.height = this.height
          this.context = canvas.getContext('2d')
        },

        render: function () {
          var duration = 1000
          var t = (performance.now() % duration) / duration

          var radius = (size / 2) * 0.3
          var outerRadius = (size / 2) * 0.7 * t + radius
          var context = this.context

          // draw outer circle
          context.clearRect(0, 0, this.width, this.height)
          context.beginPath()
          context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2)
          context.fillStyle = 'rgba(152 ,245 ,255,' + (1 - t) + ')'
          context.fill()

          // draw inner circle
          context.beginPath()
          context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2)
          context.fillStyle = 'rgba(0 ,255, 255, 1)'
          context.strokeStyle = 'white'
          context.lineWidth = 2 + 4 * (1 - t)
          context.fill()
          context.stroke()

          // update this image's data with data from the canvas
          this.data = context.getImageData(0, 0, this.width, this.height).data

          // keep the map repainting
          map.triggerRepaint()

          // return `true` to let the map know that the image was updated
          return true
        },
      }
      map.on('load', function () {
        map.addSource('geojson', _this.createDot([109.52986297852793, 18.30918775829605]))
        map.addImage('pulsing-dot', pulsingDot)
        map.addLayer({
          id: 'points',
          type: 'symbol',
          source: 'geojson',
          layout: {
            'icon-image': 'pulsing-dot',
          },
        })
      })
      // 更新位置的方法
      this.updata = function () {
        let data = this.createDot([this.transPosition[0], this.transPosition[1]]).data
        if (map.getSource('geojson')) {
          map.getSource('geojson').setData(data)
        }
        map.rotateTo(((this.transPosition[2] * 180) / 3.1415926 - 90) % 360, { duration: 0 })
      }
    },
    // 返回json格式
    createDot(center) {
      var coords = {
        latitude: center[1],
        longitude: center[0],
      }
      var ret = []
      ret.push([coords.longitude, coords.latitude])
      ret.push(ret[0])
      return {
        type: 'geojson',
        data: {
          type: 'FeatureCollection',
          features: [
            {
              type: 'Feature',
              geometry: {
                type: 'Point',
                coordinates: ret[0],
              },
            },
          ],
        },
      }
    },
  },
  watch: {
    transPosition(n, o) {
      if (o != '') {
        this.updata()
        this.local()
      }
    },
  },
}
</script>

<style lang="less" scoped>
@import '../../../assets/less/school.less';
.marker {
  border: none;
  border-radius: 50%;
}
.content {
  width: 350px;
  padding-left: 15px;
  #map {
    width: 100%;
    height: 220px;
    margin-top: 10px;
    margin-bottom: 10px;
    background: #ddd;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
}
</style>